<template>
  <div>
    <el-page-header @back="$router.back()" :content="$route.name"/>
    <el-main style="margin-top: 20px">
      <el-form :inline="true" v-model="form">
        <el-form-item label="发货地址">
          <el-select style="width: 150px" @change="search"
                     v-model="form.senderProvince">
            <el-option v-for="item in provinceList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-select style="width: 150px" @change="search"
                     v-model="form.receiverProvince">
            <el-option v-for="item in provinceList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="包裹状态">
          <el-select style="width: 150px" @change="search"
                     v-model="form.pkgState">
            <el-option v-for="item in pkgStateList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="月份">
          <el-date-picker style="width: 150px" @change="search"
                          v-model="date" type="month"
                          :clearable="false"/>
        </el-form-item>
        <el-form-item style="padding-right: 0">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="resetForm('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-main>
    <package-table :data="data" option
                   :process="processIt"
                   :handle-size-change="handleSizeChange"
                   :handle-current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-size="pageSize"
                   :total="total"/>
  </div>
</template>

<script>
import PackageTable from "../components/PackageTable";

export default {
  name: "PkgProcess",
  components: {PackageTable},
  data() {
    return {
      provinceList: this.$store.state.provinceList,
      pkgStateList: this.$store.state.pkgStateList,
      form: {
        senderProvince: 0,
        receiverProvince: 0,
        pkgState: 0,
      },
      date: new Date(),
      currentPage: 1,
      pageSize: 5,
      total: 0,
      data: [],
    };
  },
  methods: {
    resetForm() {
      this['form'] = {
        senderProvince: 0,
        receiverProvince: 0,
        pkgState: 0,
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
    search() {
      this.currentPage = 1
      this.getData()
    },
    getData() {
      const info = {
        senderProvince: this.form.senderProvince,
        receiverProvince: this.form.receiverProvince,
        currState: this.form.pkgState,
        year: this.date.getFullYear(),
        month: this.date.getMonth() + 1,
        page: this.currentPage,
        pageSize: this.pageSize
      }
      this.$axios.post(this.$serverUrl + '/pkg/list', info)
          .then(response => {
            // console.log(response.data.data)
            this.total = response.data.total
            this.data = response.data.data
          }).catch(error => {
        console.log(error)
      })
    },
    message(msg, bool) {
      this.$message({
        showClose: true,
        message: msg + (bool ? '成功!' : '失败!'),
        type: (bool ? 'success' : 'error')
      })
    },
    processIt(item) {
      this.$confirm('您是否要处理该订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.process(item)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    process(item) {
      console.log(item)
      this.$axios.post(this.$serverUrl + '/psi/add',
          {
            pkg: item.id,
            courier: this.$store.state.user.id
          })
          .then(response => {
            this.message('操作', response.data);
            this.getData()
          })
          .catch(error => {
            console.log(error)
            this.message('操作', false);
          })
    }
  },
  created() {
    this.getData()
  }
}
</script>

<style scoped>
.el-form-item {
  padding-right: 20px;
}
</style>